<template>
  <el-dialog v-model="dialogFormVisible" title="修改" width="500">
    <el-form :model="form">
      <el-form-item label="编号" style="display: none" label-width="40">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" label-width="40">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生日" label-width="40">
        <el-input v-model="form.birth" autocomplete="off" />
      </el-form-item>
      <el-form-item label="照片" label-width="40">
        <el-image style="width: 40px; height: 30px" :src="form.head"
                  fit="cover" :preview-src-list="[form.head]"
                  preview-teleported
        />
      </el-form-item>
      <el-form-item label="地址" label-width="40">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {getCurrentInstance, reactive, ref,defineEmits} from "vue";
import User from "@/page/user.vue";

export default {
  name: "UserEdit",
  components: {User},
  emits:['submit-success'], // 自定义组件事件
  setup(props, {emit}) {
    const {proxy} = getCurrentInstance();
    const dialogFormVisible = ref(false)
    const form = reactive({
      id: 0,
      username:'',
      birth:'',
      head:'',
      address:''
    })
    const open = (val) => {
      form.id = val.id;
      form.username = val.username;
      form.head = val.head;
      form.address = val.address;
      form.birth = val.birth;
      dialogFormVisible.value=true;
    }

    const submit = async ()=> {
      dialogFormVisible.value=false;
      const uri = proxy.$urls.m().userEdit
      const obj = {
        id: form.id,
        username: form.username,
        birth: form.birth,
        head: form.head,
        address: form.address
      }
      try {
        const res = await new proxy.$request(uri, obj).modepost()
        if (res.data.code !== 200) {
          new proxy.$tips(res.data.msg, 'error').msg()
        }
      } catch (e) {
        console.log(e)
      }
      emit('submit-success')
    }

    return {dialogFormVisible, form, open, submit}
  }
}
</script>

<style scoped>

</style>